<template>
  <div>
    <a-button v-if="appStore.ORG_LIST && appStore.ORG_LIST.length === 1" type="primary"> {{ currentOrgName }}</a-button>
    <a-dropdown v-else trigger="click">
      <a-button type="primary"> {{ currentOrgName }}<DownOutlined /> </a-button>
      <template #overlay>
        <a-menu>
          <a-menu-item
            v-for="item in appStore.ORG_LIST"
            :key="item.organizationId"
            :class="{ active: item.organizationId === appStore.ORG_CODE }"
            @click="onSelect(item)"
          >
            {{ item.organizationName }}
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'
import useApptore from '@/store/app'

const appStore = useApptore()
const currentOrgName = computed(() => {
  return appStore.ORG_LIST.filter((item) => item.organizationId === appStore.ORG_CODE)[0]?.organizationName
})
const onSelect = (item) => {
  appStore.ORG_CODE = item.organizationId
}
</script>
<style lang="less" scoped>
:deep(.ant-dropdown-menu-item) {
  &.active {
    @apply bg-secondary text-primary;
  }
}
</style>
